<template>
  <div v-if="shopCommodity" style="background-color: #fff;">
    <!-- 商铺横幅 -->
    <header class="com-header">
      <img-format class="com-sign-img" v-if="shopCommodity.rst.shop_sign.image_hash" :src="shopCommodity.rst.shop_sign.image_hash" :size="750" />
      <div class="mask"></div>
      <a href="javascript:;" @click="back"><span class="iconfont icon-go-back"></span></a>
      <img-format class="shop-avator" :src="shopCommodity.rst.image_path" :size="90" />
    </header>
    <section>
      <!-- 商铺基本信息 -->
      <div class="shop-desc flex-col-center">
        <p class="flex-item-center" style="margin-bottom: 15px;" @click="showMoreInfo = true">
          <span class="shop-name ellipsis">
            <strong>{{shopCommodity.rst.name}}</strong>
          </span>
          <span class="iconfont icon-right" ></span>
        </p>
        <span class=" flex-item-center">
          <span class="shop-info">评价{{shopCommodity.rst.rating}}</span>
          <span class="shop-info">
            {{JSON.parse(shopCommodity.rst.business_info).recent_order_num_display}}
          </span>
          <span class="shop-info">{{shopCommodity.rst.delivery_mode.text}}约{{shopCommodity.rst.order_lead_time}}分钟</span>
        </span>
        <template v-if="shopCommodity.redpack.length > 0">
        <div class="flex-row-center" @click="showQuan">
          <div v-for="(quan, index) in shopCommodity.redpack">
            <template v-if="quan.type === 1">
              <div class="type1">
                ￥{{quan.value}}
                <img :src="vip_src" class="svip_huangguan"/>
                {{quan.title}}
                <span style="margin-left: 15px;">领取</span>
              </div>
            </template>
            <template v-else-if="quan.type === 0">
              <div class="type0">
                共￥{{quan.value}}
                <img :src="vip_src" height="22" width="22">
                {{quan.title}}
                <span style="margin-left: 15px;">领取</span>
              </div>
            </template>
          </div>
        </div>
        </template>
        <div class="shop-tag flex-row-sb-center">
          <span>
            <span class="shop-tag-item" v-for="(tag, index) in shopCommodity.rst.activity_tags" :key="index">
              {{tag.text}}
            </span>
          </span>
          <span class="shop-fee" v-if="shopCommodity.rst.activities.length > 0" @click="popupVisible = !popupVisible">
            {{shopCommodity.rst.activities.length}}个优惠
            <span class="iconfont icon-sanjiaoxia"></span>
          </span>
        </div>
        <p class="shop-text ellipsis">
          公告：{{shopCommodity.rst.promotion_info}}
        </p>
      </div>
    </section>
    <!-- 商铺更多详情 -->
    <div class="shop-mask-more" v-if="showMoreInfo" @click.stop="showMoreInfo = false">
      <div class="more-content">
        <div class="more-main" @click.stop>
          <h2 class="more-name">
            <img-format v-if="shopCommodity.rst.target_tag_path" :src="shopCommodity.rst.target_tag_path" width="90" />
            {{shopCommodity.rst.name}}
          </h2>
          <ul class="more-config flex-row-center">
            <li class="config-item flex-col-center">
              <p class="config-title">{{shopCommodity.rst.rating}}</p>
              <span class="config-text">评分</span>
            </li>
            <li class="config-item flex-col-center">
              <p class="config-title">{{shopCommodity.rst.recent_order_num_text}}单</p>
              <span class="config-text">月售</span>
            </li>
            <li class="config-item flex-col-center">
              <p class="config-title">商家配送</p>
              <span class="config-text">约{{shopCommodity.rst.order_lead_time}}分钟</span>
            </li>
            <li class="config-item flex-col-center">
              <p class="config-title">{{shopCommodity.rst.piecewise_agent_fee.rules[0].fee + '.0'}}元</p>
              <span class="config-text">配送费</span>
            </li>
            <li class="config-item flex-col-center">
              <p class="config-title">{{shopCommodity.rst.distance_text}}</p>
              <span class="config-text">距离</span>
            </li>
          </ul>
          <p class="gonggao-title">公告</p>
          <div class="gonggao-content">
            {{content}}
          </div>
        </div>
        <div class="cancel-box" @click="showMoreInfo = false">
        </div>
      </div>
    </div>
   <!-- 店铺红包 -->
    <mt-popup
      v-model="popupQuanVisible"
      position="bottom" v-if="quanList.length > 0">
      <div class="quan-popup">
        <mt-header title="店铺专享红包">
          text
           <span icon="more" slot="right" class="iconfont icon-shanchu" @click="popupQuanVisible = false"></span>
        </mt-header>
        <p class="quan-hint" v-if="quanList[0].exchange_description"><strong>超级会员特权</strong> <span class="hint-text">{{quanList[0].exchange_description.text}}</span></p>
        <div class="quan-item flex-row-sb-center" v-for="(item, index) in quanList" :key="index">
          <div class="flex-item-center">
            <p class="amount-p">￥<strong class="amount">{{item.amount}}</strong></p>
            <div class="item-center">
              <p style="margin-bottom: 10px;">
                <img class="quan-vip_img" :src="vip_src" />
                <span class="quan-name">
                  {{item.name}}
                </span>
              </p>
              <span class="quan-timeout">
                {{item.description}}
              </span>
            </div>
          </div>
          <button class="exchange-btn" @click="exchangeQuan(item)">兑换</button>
        </div>
      </div>
    </mt-popup>
    <!-- 优惠活动 -->
    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <div class="activities-popup">
        <mt-header title="优惠活动">
           <span icon="more" slot="right" class="iconfont icon-shanchu" @click="popupVisible = false"></span>
        </mt-header>
        <p class="act-item" v-for="(item, index) in shopCommodity.rst.activities" :key="index">
          <span class="act-icon">{{item.icon_name}}</span>
          <span class="act-text">{{item.description}}</span>
        </p>
      </div>
    </mt-popup>
    <!-- 购买会员 -->
    <div @click.prevent="buysvip = false" class="shop-mask-more" v-if="buysvip">
      <div @click.stop class="buy-svip flex-col-center">
        <h2 class="svip-title">开通超级会员</h2>
        <div class="svip-center flex-col-center">
          <p class="lixiang">本单立享</p>
          <p class="svip-amount">
            ￥
            <span class="amount-num">8</span>
          </p>
        </div>
        <div class="svip-text">
          开通会员每月领至少20元无门槛红包
          <span class="important-text">{{quanList[0].popup_tips.highlight}}</span>
        </div>
        <div class="btn-box">
          <button class="svip-btn abandon" @click="buysvip = false">放弃优惠</button>
          <button class="svip-btn buysvip" @click="$router.push('/buysvip')">立即开通</button>
        </div>
      </div>
    </div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">点餐</mt-tab-item>
      <mt-tab-item id="2">评价</mt-tab-item>
      <mt-tab-item id="3">商家</mt-tab-item>
    </mt-navbar>
    <div class="navbar-container_1" v-if="selected === '1'">
      <header class="_1_header" v-if="shopCommodity.rst.posters.length > 0">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item, index) in shopCommodity.rst.posters" :key="index">
            <img-format class="nav-swipe_img" :src="item.image_hash" :size="750" />
          </mt-swipe-item>
        </mt-swipe>
      </header>
      <!-- 推荐 -->
      <div class="recommend" v-if="shopCommodity.recommend[0]">
        <h2 class="shop-recom">{{shopCommodity.recommend[0].name}}</h2>
        <div class="recommend-container">
          <div class="recommend-item" v-for="(item,index) in shopCommodity.recommend[0].items" :key="index" @click.stop="showDetail(item)">
            <div @click.stop="showFoodsDetail(item)" style="display: table-cell;">
              <img-format class="recommend-img" :src="item.image_path" />
            </div>
            <p class="recommend-name ellipsis">{{item.name}}</p>
            <p class="recommend-text">
              <span>月售{{item.month_sales}}</span>
              <span class="recommend-satisfy">好评率{{item.satisfy_rate + '%'}}</span>
            </p>
            <p class="recommend-do flex-row-sb-center">
              <i>
                <small>￥</small>
                <span class="recommend-price">{{item.price}}</span>
                <span class="recommend-subtext">
                起
                </span>
              </i>
              <i class="add-shopcar" @click.stop="showFoodsDetail(item)">+</i>
            </p>
          </div>
        </div>
      </div>
      <!-- 商品区 -->
      <div class="commodity-zone">
        <aside class="commodity-zone_aside">
          <ul class="com-menu">
            <li :class="['hash-a hash_'+index,index=== 0 ?'hash-to': '']" @click="clickMenuTitle('#id'+index, $event)" v-for="(item, index) in shopCommodity.menu" :key="index">
                <img-format class="icon_hot" v-if="item.icon_url" :src="item.icon_url"/>
                {{item.name}}
            </li>
          </ul>
        </aside>
        <div class="commodity-zone_main" @scroll="scrollFoodsContainer">
          <div class="foods-container">
            <div v-for="(menu, key) in menuList" :key="key">
              <p :id="'id'+key" class="food-info_title" :data-class="'hash_'+key">{{menu.name_desc}}<span v-if="menu.description" class="food-info_subtitle">{{menu.description}}</span></p>
              <div class="meun-food_item" @click.stop="showDetail(food)" v-for="(food, index) in menu.foods">
                <img-format v-if="food.image_path" :src="food.image_path" class="food-info_img" />
                <img-format v-else :src="food.image_mark.watermark_image" class="food-info_img" />
                <section class="food-info">
                  <div class="food-info_top">
                    <h2 class="food-info_name ellipsis">{{food.name}}</h2>
                    <p class="food-info_desc ellipsis">{{food.description}}</p>
                    <p class="food-info_view">
                      <span>月售{{food.month_sales}}份</span>
                      <span style="margin-left: 20px;">好评{{food.satisfy_rate}}%</span>
                      好评
                    </p>
                  </div>
                  <div class="flex-row-sb-center">
                    <div class="food-info_price">
                      <small>￥</small>
                      <span class="food-info_price-text">{{food.price}}</span>
                      <small>起</small>
                    </div>
                    <button class="add-shopcar" @click.stop="showFoodsDetail(food)">+</button>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 购物车框 -->
      <div class="shop-car_box" v-if="cart&&cart.length > 0">
        <p class="shop-car_title">
          <span v-for="(cell, index) in cart.shop_promotion_cell[0].content" :style="{color: cell.color}">{{cell.text}}</span>
        </p>
        <div style="background-color: #fff;" v-if="showPurchaseFoodsList&&req2.entities[0].length > 0">
          <header class="cart-header flex-row-sb-center">
            <i class="already-c">已选商品</i>
            <p class="clear" @click="clearEntities">
              <span class="iconfont icon-qingkong"></span>
              清空
            </p>
          </header>
          <ul style="margin: 0;padding: 0;">
            <li class="cart-item_detail flex-row-sb-center" v-for="(item, index) in req2.entities[0]" :key="index">
              <div class="flex-row-sb-center">
                <div>
                  <p class="cart-item_name ellipsis m0">{{item.name}}</p>
                  <p class="cart-item_desc m0">{{item|desc}}</p>
                </div>
                <small class="ci-op"><del>￥{{item.origin_price}}</del></small>
                <strong class="ci-p">￥{{item.price}}</strong>
              </div>

              <div>
                <span class="sub-shopcar add-shopcar" @click="changeQuantity('sub', item)">-</span>
                <span class="quantity">{{item.quantity}}</span>
                <span class="add-shopcar" @click="changeQuantity('add', item)">+</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="cart-footer">
          <span class="iconfont icon-gouwuche1" @click="showPurchaseFoodsList = !showPurchaseFoodsList" :class="req2.entities[0].length?'has-back': ''"><sup v-if="req2.entities[0].length>0" class="pop">{{req2.entities[0].length}}</sup></span>
          <div class="cart-container flex-row-sb-center">
            <div v-if="req2.entities[0].length === 0" class="cart-text">
              <span>未选购商品</span>
              <span>{{cart.cart.agent_fee_tip}}</span>
            </div>
            <div v-else>
              <span class="all-price">￥{{allPrice}}</span>
              <del class="del-price">￥{{allPrice}}</del>
            </div>
            <button class="cart-btn">
              <template v-if="req2.entities[0].length === 0">
                {{cart.checkout_button_v2.forbidden_reason.content}}
              </template>
              <template v-else>
                <button class="go-settle" @click="$router.push('/clearing')">
                  {{cart.checkout_button.text}}
                </button>
              </template>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论区 -->
    <res-comment v-else-if="selected === '2'" />
    <!-- 商铺信息展示区 -->
    <div v-else-if="selected === '3'" style="background-color: #f5f5f5;">
      <div class="container_3">
        <h2 class="container-title">配送信息</h2>
        <p class="info_1">
          由{{shopCommodity.rst.delivery_mode.text}}提供配送，约{{shopCommodity.rst.order_lead_time}},距离{{shopCommodity.rst.distance_text}}
        </p>
        <p class="info_1">配送费￥{{shopCommodity.rst.piecewise_agent_fee.rules[0].fee}}</p>
      </div>
      <div class="container_3">
        <h2 class="container-title">商家服务</h2>
        <p class="info_1" v-for="(support, index) in shopCommodity.rst.supports" :key="index">
          <span class="supports-icon">{{support.icon_name}}</span>
          {{support.description}}
        </p>
      </div>
      <div class="container_3">
        <h2 class="container-title">商家实景</h2>
        <div class="albums">
          <div v-for="(album, index) in shopCommodity.rst.albums" :key="index" class="albums-container">
            <img-format :src="album.cover_image_hash" class="album-cover" />
            <p class="cover-name">{{album.name+'('+album.count+'张)'}}</p>
          </div>
        </div>
        </p>
      </div>
      <div class="container_3">
        <h2 class="container-title">商家信息</h2>
        <p class="info_1">{{shopCommodity.rst.description}}</p>
        <p class="info_2 flex-row-sb-center">
          <strong class="info_2-title">品类</strong>
          <span class="info_2-desc">{{getFlavors}}</span>
        </p>
        <p class="info_2 flex-row-sb-center">
          <strong class="info_2-title">商家电话</strong>
          <span class="info_2-desc">{{getFlavors}}</span>
        </p>
        <p class="info_2 flex-row-sb-center">
          <strong class="info_2-title">地址</strong>
          <span class="info_2-desc">{{shopCommodity.rst.address}}</span>
        </p>
        <p class="info_2 flex-row-sb-center">
          <strong class="info_2-title">营业时间</strong>
          <span class="info_2-desc">{{shopCommodity.rst.opening_hours[0].replace('/', '-')}}</span>
        </p>
      </div>
      <div class="container_3">
        <h2 class="container-title" @click="businessQualification(shopCommodity.rst)">营业资质</h2>
      </div>
    </div>
    <!-- 选购食品信息 -->
    <mt-popup
      v-model="popupFoodVisible"
      position="bottom">
      <div class="foods-detail_box" v-if="foodsDetail" :key="fresh">
        <div class="foods-detail">
          <div class="foods-detail_l">
            <img-format class="recommend-img" :src="foodsDetail.image_path" :size="750" />
            <div style="margin-left: 20px;width: 50%;">
              <h2 class="foods-name ellipsis">{{foodsDetail.name}}</h2>
              <span class="foods-desc">已选:{{spec_attrs|xiegang}}</span>
              <p class="foods-price">￥{{foodsDetail.price}}</p>
            </div>
          </div>
          <span class="iconfont icon-shanchu" @click="popupFoodVisible = false"></span>
        </div>
        <template v-if="foodsDetail.specifications.length > 0">
          <div class="foods-params" v-for="(item, i) in foodsDetail.specifications" :key="item.name">
            <p class="foods-params_title">{{item.name}}</p>
            <div class="flex-item-center spec-cont">
              <div :class="['foods-specifications', index === 0 ? 'is-selected_foods_details' : '']" v-for="(subItem, index) in item.values" :key="index" @click="selectSpec('new_specs', item, subItem, i, $event)">
              {{subItem}}
             </div>
            </div>
          </div>
        </template>
        <template v-if="foodsDetail.attrs.length > 0">
          <div class="foods-params" v-for="(item, ins) in foodsDetail.attrs" :key="item.name" @click="selectSpec(item, $event)">
            <p class="foods-params_title">{{item.name}}</p>
            <div class="flex-item-center spec-cont">
              <div :class="['foods-specifications', indexs === 0 ? 'is-selected_foods_details' : '']" v-for="(subItem, indexs) in item.values" @click="selectSpec('attrs', item, subItem, ins, $event)" :key="indexs">{{subItem}}</div>
            </div>
          </div>
        </template>
      </div>
      <button class="is-ok" @click="putInCar">选好了</button>
    </mt-popup>
    <!-- 商品详情 -->
   <div class="food-detail-box" v-if="foodDetailVisible">
     <div class="fdb-h">
       <img-format :src="currentFoodDetail.image_path" class="fdb-img" :size="750" />
       <span class="iconfont icon-shanchu" @click="foodDetailVisible = false"></span>
     </div>
     <section class="fdb-s">
       <p class="fdb-name m0">
         <span class="zhaopai" v-if="currentFoodDetail.attributes[0] && currentFoodDetail.attributes[0].icon_name === '招牌'">{{currentFoodDetail.attributes[0].icon_name}}</span>
        {{currentFoodDetail.name}}
       </p>
       <p class="fdb-rate">
         月售{{currentFoodDetail.month_sales}}份
         好评率{{currentFoodDetail.satisfy_rate_text}}%
       </p>
       <div class="fdb-price flex-row-sb-center">
         <p class="m0">
          <small>￥</small>
          <strong>{{currentFoodDetail.price}}</strong>
          <small>起</small>
          <span class="discount-rate">{{currentFoodDetail.discount_rate}}起</span>
         </p>
         <button class="add-shopcar" @click.stop="showFoodsDetail(currentFoodDetail)">+</button>
       </div>
       <p class="fdb-desc">{{currentFoodDetail.description}}</p>
       <p class="wenti">价格说明<span class="iconfont icon-wenti"></span></p>
     </section>
    </div>
  </div>
</template>

<script>
 import { getShopCommodity, getQuan, cardClient, getCurrentOrders } from '@/api/elm-data'
 import ImgFormat from '_c/imgFormat/ImgFormat.vue'
 import ResComment from '@/views/ResComment.vue'
  export default {
    name: 'shop-commodity',
    data() {
      return {
        vip_src: '',
        shopCommodity: undefined,
        actions:[],
        popupVisible: false,
        showMoreInfo: false,
        req: {
          userID: '',
          shopId: '',
          latitude: '',
          longitude: ''
        },
        popupQuanVisible: false,
        quanList: [],
        buysvip: false,
        content: '',
        selected: '1',
        popupFoodVisible: false,
        foodsDetail: undefined,
        spec_attrs: {
          attrs: [],
          new_specs:[]
        },
        menuList: [],
        fresh: 0,
        currentHashNode: '.hash_0',
        req2: {
          entities: [[]],
          operating_sku_ids: [],
          restaurant_id: ''
        },
        foodsList: [],
        cart: undefined,
        showPurchaseFoodsList: false,
        foodDetailVisible: false,
        currentFoodDetail: false,
        allPrice: 0
      }
    },
    components: {
      ImgFormat,
      ResComment
    },
    computed: {
      getFlavors() {
        let flavors = ''
        this.shopCommodity.rst.flavors.forEach((item, i) => {
            if(i === this.shopCommodity.rst.flavors.length - 1) {
              flavors += item.name
            }else {
              flavors += item.name + ','
            }
        })
        return flavors
      }
    },
    async created() {
      if(this.$route.query.is_session) {
        window.sessionStorage.setItem('SHOP_ID', this.$route.query.shopId)
      }
      this.req.userID = window.sessionStorage.getItem('USER_ID') - 0
      this.req.shopId = window.sessionStorage.getItem('SHOP_ID')
      this.req.longitude = JSON.parse(window.sessionStorage.getItem('Geo')).longitude
      this.req.latitude = JSON.parse(window.sessionStorage.getItem('Geo')).latitude
      this.req2.restaurant_id = this.req.shopId
      this.vip_src = window.sessionStorage.getItem('svip_img')
      try{
        const { data } = await getShopCommodity(this.req)
        this.shopCommodity = data
        this.content = data.rst.description || data.rst.promotion_info || '温馨提示： 订餐高峰期请提前下单'
        this.menuList = data.menu
      }catch(e) {
        console.dir(e)
        this.$toast('获取商家信息失败')
      }
      this.getCartList()
    },
    mounted() {
      const interval = setInterval(() => {
        if(document && this.shopCommodity) {
          console.log(this.shopCommodity.rst.name)
          document.title = this.shopCommodity.rst.name
          clearInterval(interval)
        }
      })
    },
    methods: {
      back() {
        window.history.back()
      },
      async showQuan() {
        this.popupQuanVisible = true
        const {data } = await getQuan(this.req)
        this.quanList = data
      },
      exchangeQuan(item) {
        if(item.exchange_description) {
          this.buysvip = true
        }
      },
      showFoodsDetail(item) {
        this.fresh = Math.random()
        this.foodDetailVisible = false
        this.foodsDetail = item
        console.log(this.foodsDetail)
        this.popupFoodVisible = true
        item.attrs.forEach(items => {
          this.spec_attrs.attrs.push({
            name: items.name,
            value: items.values[0]
          })
        })
        item.specifications.forEach(items => {
          this.spec_attrs.new_specs.push({
            name: items.name,
            value: items.values[0]
          })
        })
      },
      selectSpec(cate, item, subItem, i, e) {
        if(e) {
          e.target.parentNode.querySelector('.is-selected_foods_details').classList.remove('is-selected_foods_details')
          e.target.classList.add('is-selected_foods_details')
          const obj = {
            name: item.name,
            value: subItem
          }
          this.spec_attrs[cate].splice(i, 1, obj)
          console.log(this.spec_attrs)
        }
      },
      clickMenuTitle(hash, e) {
          document.querySelector('.hash-to').classList.remove('hash-to')
        if(e.target) {
          document.querySelector(hash).scrollIntoView()
          e.target.classList.add('hash-to')
        }else {
          e.classList.add('hash-to')
        }
      },
      scrollFoodsContainer(e) {
        const title = document.querySelectorAll('.foods-container .food-info_title')
        const czm = document.querySelector('.commodity-zone_main')
        if(title) {
          const elm = Array.from(title).filter(item => {
            return item.offsetTop - e.target.scrollTop < 1362
          })
          const targetElm = elm[elm.length-1]
          if(targetElm) {
            this.currentHashNode = '.' + targetElm.getAttribute('data-class')
          }
        }
      },
      businessQualification(rst) {
        rst = JSON.stringify(rst)
        this.$router.push({name: 'businessqualification', query: rst
        })
      },
      showDetail(item) {
        this.currentFoodDetail = item
        this.foodDetailVisible = true
      },
      putInCar() {
        let obj = {
          id: 20153343996,
          attrs: this.spec_attrs.attrs,
          new_specs: this.spec_attrs.new_specs,
          sku_id: '2000005502' + 51279019,
          quantity: 1,
        }
        obj = Object.assign(this.foodsDetail, obj)
        this.allPrice += 1 * this.foodsDetail.price
        this.req2.operating_sku_ids[0] = obj.sku_id
        this.req2.entities[0].push(obj)
        this.popupFoodVisible = false
        this.getCartList()
      },
      clearEntities() {
        this.req2.entities[0] = []
        this.showPurchaseFoodsList = false
      },
      async getCartList() {
        try {
          const d = this.$_.cloneDeep(this.req2)
          d.entities[0].forEach(item => {
            delete item.info
          })
          let req = {
            restaurant_id: this.req.shopId,
            user_id: this.req.userID
          }
          req = Object.assign(req, {
            lat: this.req.latitude,
            lng: this.req.longitude,
            shopId: this.req.shopId
          }, d)
          const { data } = await cardClient(req)
          this.cart = data
        }catch(e) {
          this.$toast('购物车还没有添加商品', 'center')
        }
      },
      changeQuantity(type, item) {
        console.log(item.id)
        if(type === 'sub' && item.quantity > 0) {
          item.quantity --
          if(item.quantity === 0) {
            this.req2.entities[0].splice(
              this.req2.entities[0].findIndex(entity => {
                return entity.id === item.id
              }),
            1)
          }
          this.allPrice -= item.price
        }else if(type === 'add') {
          item.quantity ++
          this.allPrice += item.price - 0
        }
      },
      async goSettle() {
        this.req2.lat = this.req.latitude
        this.req2.lng = this.req.longitude
        this.req2.shopId = this.req.shopId
        this.req2.user_id = this.req.userID
        try {
          const d = await getCurrentOrders(this.req2)
          console.log(d)
        }catch(e) {
          this.$toast(e.response.data.message, 'center')
        }
      }
    },
    watch: {
      currentHashNode() {
        this.clickMenuTitle(this.currentHashNode, document.querySelector(this.currentHashNode))
      },
      popupFoodVisible() {
        if(!this.popupFoodVisible) {
          this.spec_attrs.attrs = []
          this.spec_attrs.new_specs = []
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .com-header {
    position: relative;
    top: 0;
    left: 0;
    height: 200px;
    background-color: rgba(119,103,137, .43);
  }
  .icon-go-back {
    padding: 10px;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    position: relative;
    top: 15px;
    z-index: 1;
  }
  .com-sign-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 750px;
    height: 100%;
    z-index: 0;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .2);
  }
  .shop-avator {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    width: 150px;
    z-index: 1;
  }
  .shop-desc {
    margin-top: 40px;
  }
  .shop-name {
    display: inline-block;
    max-width: 500px;
    font-size: 44px;
  }
  .icon-right {
    font-size: 38px;
  }
  .shop-info {
    margin: 0 10px;
    color: #666;
    font-size: 22px;
  }
  .shop-tag-item {
    margin: 0 5px;
    border: 1px solid #FF5500;
    border-radius: 5px;
    color: #FF5500;
    font-size: 20px;
  }
  .shop-tag {
    margin-top: 15px;
    min-width: 600px;
  }
  .shop-fee {
    font-size: 22px;
    color: #666;
  }
  .shop-text {
    width: 600px;
    font-size: 20px;
    color: #9e9e9e;
  }
  .activities-popup {
    width: 100vw;
    padding: 20px;
    min-height: 500px;
  }
  .mint-popup {
    z-index: 3333!important;
  }
  .mint-header {
    width: 100vw;
    background-color: transparent;
  }
  /deep/.mint-header-title {
    font-size: 36px;
    color: #000;
    font-weight: 600;
  }
  .icon-shanchu {
    font-size: 36px;
    color: #555;
  }
  .act-text {
    margin-left: 10px;
  }
  .act-icon {
    padding: 2px 4px;
    border: 1px solid #FF5339;
    color: #FF5339;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .act-item {
    margin-left: 50px;
    font-size: 22px;
    color: #666;
    display: flex;
  }
  .shop-mask-more {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 9999;
  }
  .more-content {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 80%;

  }
  .more-main {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    animation: scale .1s linear backwards;
  }
  @keyframes scale{
    0%{
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  .more-name {
    text-align: center;
    font-size: 46px;
    color: #444444;
  }
  .type1, .type0 {
    position: relative;
    padding: 8px;
    margin: 10px 20px;
    background-color: #ffe578;
    color: #594519;
    font-size: 22px;
    &::after {
      content: '';
      position: absolute;
      height: 10px;
      width: 10px;
      background-color: #fff;
      transform: rotate(45deg);
      top: -5px;
      right: 60px;
    }
    &::before {
      content: '';
      position: absolute;
      height: 10px;
      width: 10px;
      background-color: #fff;
      transform: rotate(45deg);
      bottom: -5px;
      right: 60px;
    }
  }
  .svip_huangguan {
    height: 22px;
    width: 22px;
  }
  .type0 {
    position: relative;
    padding: 8px;
    background-color: #fff4f4;
    color: #5c1603;
  }
  .more-config {
    padding-left: 0;
    align-items: flex-start;
  }
  .config-title {
    margin: 0 0 10px;
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    color: #272727;
  }
  .config-text {
    text-align: center;
    color: #666;
  }
  .config-item {
    width: 20%;
  }
  .gonggao-title {
    text-align: center;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 70px;
      height: 1px;
      top: 50%;
      right: 150px;
      background-color: #666;
    }
    &::after {
      content: '';
      position: absolute;
      width: 70px;
      height: 1px;
      top: 50%;
      left: 150px;
      background-color: #666;
    }
    font-size: 26px;
    color: #888;
  }
  .gonggao-content {
    width: 90%;
    margin: 0 auto;
    color: #666;
    font-size: 24px;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: scroll;
  }
  .cancel-btn {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
  }
  .cancel-box {
    margin: 50px auto 0;
    height: 40px;
    width: 40px;
    padding: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 1px;
      top: 50%;
      background-color: #fff;
      transform: rotate(45deg);
    }
    &::before {
      content: '';
      position: absolute;
      width: 40px;
      height: 1px;
      top: 50%;
      background-color: #fff;
      transform: rotate(-45deg);
    }
  }
  .quan-popup {
    min-height: 300px;
    padding-bottom: 50px;
  }
  .quan-hint {
    padding: 0 20px;
    color: #323232;
    font-size: 24px;;
  }
  .hint-text {
    color: #666;
    font-size: 22px;
  }
  .quan-item {
    margin: 20px;
    padding: 15px;
    background-color: #fff4be;
    color: #5c1603;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      height: 20px;
      width: 20px;
      right: 160px;
      top: -10px;
      transform: rotate(45deg);
      background-color: #fff;
    }
    &::before {
      content: '';
      position: absolute;
      height: 20px;
      width: 20px;
      right: 160px;
      bottom: -10px;
      transform: rotate(45deg);
      background-color: #fff;
    }
  }
  .amount-p {
    font-size: 26px;
    margin: 20px;
  }
  .amount {
    font-size: 60px;
  }
  .item-center {
    margin: 0 20px;
  }
  .quan-vip_img {
    height: 30px;
    vertical-align: middle;
  }
  .quan-name {
    font-size: 30px;
    font-weight: 600;
  }
  .quan-timeout {
    font-size: 22px;
  }
  .exchange-btn {
    padding: 10px 30px;
    background-color: #5c1603;
    border-radius: 30px;
    font-size: 26px;
    font-weight: 600;
    color: #fff4be;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      height: 90px;
      top: -20px;
      left: -42px;
      width: 1px;
      background-color: #d1d1d1;
    }
  }
  .buy-svip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    z-index: 2003;
  }
  .svip-title {
    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601109801137&di=b7d48c5a62daf1dfb211248a4885e94e&imgtype=0&src=http%3A%2F%2Fimg.51miz.com%2FElement%2F01%2F00%2F47%2F63%2F21839bba_E1004763_9113cf97.jpg%2521%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fjpg) no-repeat center center;
    background-size: 100% 200%;
    text-align: center;
    font-weight: 32px;
    color: #fff;
  }
  .svip-center {
    background: #fe7c56;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    width: 40%;
    padding: 20px;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      width: 50%;
      height: 40px;
      left: 20px;
      bottom: 50px;
      background-color: #fe7c56;
      transform: rotate(45deg);
    }
    &::before {
      content: '';
      position: absolute;
      width: 50%;
      height: 40px;
      right: 20px;
      bottom: 50px;
      background-color: #fe7c56;
      transform: rotate(-45deg);
    }
  }
  .lixiang {
    font-size: 30px;
    color: #fff;
  }
  .svip-amount {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 30px;
    background-color: #f4e5a2;
    border: 20px double #aaa;
    text-align: center;
    font-size: 26px;
  }
  .amount-num {
    font-size: 60px;
    font-weight: 600;
    vertical-align: sub;
  }
  .svip-text {
    width: 60%;
    font-size: 26px;
    color: #787878;
  }
  .important-text {
    color: #F9355E;
  }
  .svip-btn {
    padding: 20px 60px;
    margin: 20px 20px 0;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-weight: 600;
    font-size: 34px;
  }
  .abandon {
    color: #2f2f2f;
  }
  .buysvip {
    color: #7b460a;
    background: linear-gradient(to right, #feec9f, #e3c958);
  }
  .mint-navbar {
    margin: 40px auto;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
  }
  .mint-tab-item {
    margin: 0 60px;
  }
  /deep/.mint-tab-item-label {
    font-size: 32px!important;
    color: #666;
  }
  /deep/.is-selected {
    color: inherit!important;
    font-weight: 600;
    color: #333;
  }
  .navbar-container_1 {
    border-top: 1px solid #dedede;
  }
  ._1_header {
    padding: 20px 20px 10px;
    height: 200px;
  }
  .nav-swipe_img {
    width: 100%;
  }
  .recommend {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    overflow: hidden;
  }
  .recommend-container {
    display: flex;
    align-items: center;
    overflow-x: scroll;
  }
  .recommend-container::-webkit-scrollbar {
    width: 0;
  }
  .recommend-item {
    margin-right: 20px;
    width: 260px;
  }
  .recommend-img {
    width: 240px;
    height: 240px;
    margin-right: 0;
  }
  .recommend-name {
    margin: 5px 0;
    width: 200px;
    font-size: 28px;
  }
  .recommend-text {
    margin: 5px 0;
    font-size: 22px;
    color: #ccc;
  }
  .recommend-satisfy {
    margin-left: 20px;
  }
  .recommend-do {
    margin: 5px;
    color: #FF5500;
  }
  .recommend-price {
    font-size: 36px;
  }
  .recommend-subtext {
    font-size: 22px;
  }
  .foods-detail_box {
    min-height: 1000px;
  }
  .foods-detail {
    box-sizing: border-box;
    width: 100vw;
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
  .foods-detail_l {
    display: flex;
    width: 80%;
  }
  .food-detail_img {
    width: 200px;
    height: 200px;
  }
  .foods-name {
    margin: 10px 0;
    font-size: 36px;
  }
  .foods-desc {
    font-size: 22px;
    color: #999;
  }
  .foods-price {
    margin: 90px 0 0;
    font-size: 36px;
    color: #FF5339;
  }
  .foods-params {
    padding: 20px;
  }
  .foods-params_title {
    font-size: 26px;
    color: #666;
  }
  .spec-cont {
    flex-wrap: wrap;
  }
  .foods-specifications {
    margin: 10px;
    padding: 10px 0;
    width: 30%;
    background-color: #f5f5f5;
    color: #222;
    text-align: center;
    font-size: 26px;
  }
  .is-selected_foods_details {
    background-color: #d3eaff;
    color: #0097FF;
    font-weight: 600;
  }
  .is-ok {
    box-sizing: border-box;
    display: block;
    width: 90%;
    padding: 20px 0;
    margin: 0 auto 10px;
    background-color: #0097FF;
    border-radius: 6px;
    color: #fff;
    font-size: 36px;
  }
  .commodity-zone {
    display: flex;
    margin-top: 50px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .commodity-zone_aside {
    box-sizing: border-box;
    width: 25%;
    background-color: #f8f8f8;
  }
  .commodity-zone_main {
    box-sizing: border-box;
    width: 75%;
    padding: 10px;
    max-height: 1270px;
    overflow-y: scroll;
  }
  .com-menu {
    margin: 0;
    padding: 0;
    padding-bottom: 80px;
    max-height: 1000px;
    overflow-y: scroll;
  }
  .hash-a {
    padding: 30px 20px;
    font-size: 26px;
    color: #999;
  }
  .icon_hot {
    box-sizing: border-box;
    height: 26px;
    width: 26px;
    margin-right: 10px;
  }
  .foods-container {
    padding-bottom: 150px;
  }
  .food-info_title {
    margin-top: 0;
    color: #666;
    font-size: 24px;
    font-weight: 600;
  }
  .food-info_subtitle {
    margin-left: 10px;
    font-size: 20px;
    font-weight: 100;
  }
  .meun-food_item {
    display: flex;
    margin: 25px 5px;
  }
  .food-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    padding-left: 10px;
  }
  .food-info_img {
    width: 30%;
    height: 30%;
  }
  .food-info_name {
    width: 80%;
    margin: 0;
    font-size: 32px;
  }
  .food-info_desc {
    width: 80%;
  }
  .food-info_desc, .food-info_view {
    margin: 10px 0;
    color: #999;
    font-size: 22px;
  }
  .food-info_price {
    color: #FF5F3E;
  }
  .food-info_price-text {
    font-size: 32px;
  }
  .hash-to {
    background-color: #fff;
    color: #555;
  }
  .container_3 {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border-top: 2px solid #f5f5f5;
  }
  .container-title {
    font-size: 34px;
  }
  .info_1 {
    color: #666;
    font-size: 24px;
  }
  .supports-icon {
    padding: 2px 11px;
    border: 1px solid #585858;
  }
  .albums {
    width: 100%;
    overflow-x: scroll;
  }
  .albums-container {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    height: 200px;
    width: 200px;
  }
  .album-cover {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .cover-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    margin: 0;
    background-color: rgba(0, 0, 0, .5);
    text-align: center;
    color: #fff;
    font-size: 24px;
  }
  .info_2 {
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid #d9d9d9;
  }
  .info_2-title {
    width: 20%;
    font-size: 26px;
  }
  .info_2-desc {
    width: 60%;
    text-align-last: right;
    font-size: 24px;
    color: #666;
  }
  .shop-car_box {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 10;
  }
  .shop-car_title {
    margin: 0;
    padding: 6px 0;
    background-color: #fffad8;
    border-bottom: 2px solid #fffad8;
    text-align: center;
    font-size: 22px;
    color: #666;
  }
  .cart-footer {
    position: relative;
    height: 120px;
    width: 100%;
    background-color: rgba(0, 0, 0, .7);
    border-top: 1px solid transparent;
  }
  .icon-gouwuche1 {
    position: absolute;
    top: -20px;
    left: 30px;
    height: 80px;
    width: 80px;
    background-color: #3a3a3a;
    border-radius: 50%;
    border: 10px solid #636363;
    color: #5a5a5a;
    font-size: 50px;
    text-align: center;
    line-height: 80px;
  }
  .cart-container {
    margin: 20px 40px 0 150px;
  }
  .cart-text {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    color: #b3b3b3;
  }
  .cart-btn {
    background-color: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 30px;
  }
  .cart-header {
    padding: 0 20px;
    background-color: #eceff1;
  }
  .already-c {
    font-size: 32px;
    color: #666;
  }
  .clear {
    size: 26px;
    color: #666;
  }
  .icon-qingkong {
    font-size: 26px;
  }
  .food-detail-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 6!important;
  }
  .fdb-h {
    width: 100%;
    height: 40%;
    position: relative;
  }
  .fdb-img {
    height: 100%;
    width: 100%;
  }
  .fdb-h .icon-shanchu {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 32px;
    text-align: center;
    line-height: 60px;
  }
  .fdb-s {
    padding: 20px;
    box-sizing: border-box;
  }
  .fdb-name {
    font-size: 36px;
    font-weight: 600;
  }
  .zhaopai {
    padding: 2px 5px;
    background-color: #faad7e;
    color: #fff;
    font-size: 22px;
  }
  .fdb-rate {
    margin: 10px 0;
    color: #666;
  }
  .fdb-price {
    color: #FD5746;
    font-size: 32px;
  }
  .discount-rate {
    margin-left: 20px;
    border: 1px solid #FD5746;
    font-size: 20px;
  }
  .fdb-desc {
    color: #666;
    font-size: 24px;
  }
  .wenti {
    font-size: 22px;
    color: #666;
  }
  .icon-wenti {
    font-size: 22px;
  }
  .shop-recom {
    margin-top: 0;
    font-size: 34px;
  }
  .cart-item_detail {
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ececec;
  }
  .cart-footer {
    margin-right: 20px;
  }
  .cart-item_name {
    width: 300px;
    font-size: 32px;
  }
  .cart-item_desc {
    font-size: 20px;
    color: #999;
    width: 300px;
  }
  .has-back {
    border-color: #4b4b4b;
    background-color: #0097FF;
    color: #fff;
  }
  .pop {
    position: absolute;
    top: -10px;
    left: 80%;
    height: 26px;
    min-width: 26px;
    display: block;
    background-color: #FF5339;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    z-index: 3;
  }
  .ci-op {
    color: #888;
  }
  .ci-p {
    font-size: 30px;
    color: #f93671;
  }
  .go-settle {
    padding: 20px;
    border-radius: 6px;
    background-color: #00D762;
    font-weight: 600;
    color: #fff;
  }
  .quantity {
    margin: 0 20px;
    font-size: 32px;
    color: #666;
  }
  .all-price {
    color: #fff;
    font-size: 36px;
  }
  .del-price {
    margin-left: 10px;
    color: #999;
    font-size: 26px;
  }
</style>
